<template>
    <div class="wrap">
        <look-header :left="'个人中心'" :center="'直播吧↓'" :right="'搜索'"></look-header>
        <div class="main">
           
            <div class="tab">
                <span v-for="(item,index) in tabList" :key="item.id" :class="{active:tabInd == index}" @click="tabClick(item.id,index)">{{item.title}}</span>
            </div>
            <div class="list">
                <dl v-for="item in conList" :key="item.id" @click="babeilClick(item.id)">
                    <dt>
                        <img :src="item.img" alt="">
                    </dt>
                    <dd>{{item.title}}</dd>
                </dl>
            </div>
        </div>
        <div class="footer">
            <look-footer v-for="(item,index) in footerList" :key="item.id" :item="item" :class="{active:index == ind}"></look-footer>
        </div>
       
    </div>
</template>

<script>
import LookHeader from '@/components/LookHeader'
import LookFooter from '@/components/LookFooter'
export default {
    components:{
        LookHeader,
        LookFooter
    },
    data(){
        return {
            footerList:[],
            ind:2,
            tabList:[],
            tabInd:0,
            conList:[]
        }
    },
    created(){
        this.$http.get("/footerList").then(res =>{
            if(res.data.code == 0){
                this.footerList = res.data.data
            }
        });
        this.$http.get("/list").then(res =>{
            if(res.data.code == 0){
                this.tabList = res.data.data
                this.conList = this.tabList[0].children
            }
        })
    },
    methods:{
        tabClick(id,index){
            this.tabInd = index
            let ind = this.tabList.findIndex(item => {
                return item.id == id
            })
            this.conList = this.tabList[ind].children
        },
        babeilClick(id){
            this.$router.push({path:"/babeil",query:{id}})
        }
    }
}
</script>

<style lang="scss">
    .wrap{
        height:100%;
        width:100%;
        display: flex;
        flex-direction: column;
    }
    .main{
        flex:1;
        display: flex;
        flex-direction:column;
        overflow: hidden;
        .tab{
            height:30px;
            width: 100%;
            line-height:30px;
            display: flex;
            border-bottom:1px solid #ccc;
            span{
                display: inline-block;
                width: 50px;
                text-align: center
            }
            span.active{
                color:rgb(45, 106, 240);
            }
        }
        .list{
            flex:1;
            display: flex;
            height: auto;
            flex-direction: column;
            overflow-y:auto;
            dl{
                border-bottom: 1px solid #ccc;
                padding: 10px;
                display: flex;
                dt{
                    width: 80px;
                    height:80px;
                    margin-right: 10px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                dd{
                    flex:1;
                }
            }
        }
    }
    .footer{
        height: 50px;
        display:flex;
        background: #fff;
        border-top:1px solid #ccc;
        dl{
            width:20%;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        .active{
                color:rgb(58, 106, 209)
            }
    }
</style>
